<!--excel模板管理-->
<template>
  <div class="list-card-container">
    <a-card title="excel模板管理" class="general-card">
      <!-- 查询表单 -->
      <TableSearch
        ref="searchRef"
        :data-source="SEARCH_FORM"
        @change="searchModule"
      />

      <!-- 表格 -->
      <AdvancedDrawer
        clickword="新增模板"
        title="新增模板"
        :data-source="FORM"
        narrow
        style="margin-bottom: 10px"
        @change="addExcel"
      />
      <a-table
        :columns="COLUMNS"
        :data="list"
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #operation="{ record }">
          <a-space>
            <PropertyEdit :module-id="record.id" @after-submit="updateExcel" />
            <a-popconfirm
              content="确定删除吗？"
              type="warning"
              @ok="deleteExcel(record.id)"
            >
              <a-link> 删除 </a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts" name="ExcelModule">
  import { onMounted, ref, reactive } from 'vue';
  import { TableColumnData, Message } from '@arco-design/web-vue';
  import { Pagination } from '@/types/global';
  import {
    ExcelModuleRecord,
    ExcelModuleRecordReq,
  } from '@/api/infrastructure/model/excelModuleModel';
  import {
    queryExcelModulePage,
    saveExcelModuleRecord,
    removeExcelModuleRecord,
  } from '@/api/infrastructure/excel-module';
  import TableSearch from '@/common/components/cac-components/advanced-search/index.vue';
  import AdvancedDrawer from '@/common/components/cac-components/advanced-drawer/index.vue';
  import PropertyEdit from './components/property-edit.vue';

  const SEARCH_FORM = [
    { fieldName: 'excelName', labelText: '模板名称', type: 'text' },
  ];
  const searchModule = (params: ExcelModuleRecordReq) => {
    getModuleList(params);
  };
  const getModuleList = async (params?: ExcelModuleRecordReq) => {
    loading.value = true;
    try {
      const { data } = await queryExcelModulePage({
        limit: pagination.pageSize,
        page: pagination.current,
        ...params,
      });
      list.value = data.list;
    } finally {
      loading.value = false;
    }
  };
  onMounted(() => {
    getModuleList();
  });

  const loading = ref<boolean>(false);
  const searchRef = ref<any>();
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    showPageSize: true,
    showTotal: true,
  };
  const pagination = reactive({
    ...basePagination,
  });
  const onPageChange = (current: number) => {
    pagination.current = current;
    searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    searchRef.value.handleSubmit(); // 与搜索结果保持一致
  };

  const list = ref<ExcelModuleRecord[]>([]);
  const COLUMNS: TableColumnData[] = [
    {
      title: '序号',
      align: 'center',
      dataIndex: 'index',
      width: 100,
      render: ({ rowIndex }) => rowIndex + 1,
      fixed: 'left',
    },
    { title: '模板名称', dataIndex: 'excelName', align: 'center' },
    {
      title: '操作',
      dataIndex: 'operation',
      slotName: 'operation',
      width: 200,
      align: 'center',
      fixed: 'right',
    },
  ];
  const FORM = [
    { labelText: '模板名称', fieldName: 'excelName', col: 24, required: true },
    {
      labelText: '备注',
      fieldName: 'remark',
      textrow: 4,
      col: 24,
    },
  ];
  const addExcel = async (req: ExcelModuleRecordReq) => {
    // 创建excel模板
    try {
      await saveExcelModuleRecord(req);
      Message.success('新增成功');
    } finally {
      getModuleList();
    }
  };
  const deleteExcel = async (id: string) => {
    // 删除excel模板
    try {
      await removeExcelModuleRecord(id);
      Message.success('操作成功');
    } finally {
      getModuleList();
    }
  };
  const updateExcel = () => {
    getModuleList();
  };
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    border-radius: var(--border-radius-default);
  }
</style>
